<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超酷jQuery水波倒影特效插件</title>
    <link rel="stylesheet" type="text/css" href="lake/reset.css" />
    <link rel="stylesheet" type="text/css" href="lake/demo.css">
    <style type="text/css">
        #lakes { overflow: hidden; }
        #container {
            width: 720px;
            margin: 30px auto;
        }
        canvas { float: left; }
    </style>

    <script type="text/javascript" src="lake/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="lake/lake.js"></script>
    <script type="text/javascript">
        $(function() {
            $('#lake-img').lake({
                'waves': 6,
                'scale': 0.5
            });

            $('#lake-img2').lake();

            $('#lake-img3').lake({
                'speed': 1.5,
                'scale': 1.5
            });
        });
    </script>

</head>
<body>

<div id="container">
    <div id="lakes">
        <img id="lake-img"  src="lake/lake.png" style="display: none;"/>
        <img id="lake-img2" src="lake/lake2.png" style="display: none;"/>
        <img id="lake-img3" src="lake/lake3.png" style="display: none;"/>
    </div>
</div>



</body>
</html>